<template>
  <div>
    <div class="energy-table">
      <div class="table-title">
        <h2>临安区公共机构能源消耗申报汇总表</h2>
      </div>
      <div class="table-content">
        <div class="table-select">
          <div class="table-selectItem">
            <label>填报单位：</label>
            <select style="max-width: 280px;" v-model="departName" @change="getDetail()">
              <option :key="i" v-for="(item,i) in departments" :value="item">{{item}}</option>
            </select>
          </div>
          <div class="table-selectItem">
            <label>汇总年份：</label>
            <select style="width: 90px;" v-model="year" @change="getDetail()">
              <option :key="n" v-for="n in selectYear" :value="n">{{n}}</option>
            </select>
          </div>
        </div>
        <div class="table-box">
          <table width="150%" border="1" cellpadding="10">
            <tr height="55px;" style="background-color:#E7F3FF;">
              <td align="center" valign="middle" style="width:40px;"></td>
              <td align="center" valign="middle" colspan="2">电消耗</td>
              <td align="center" valign="middle" colspan="2">水消耗</td>
              <td align="center" valign="middle" colspan="2">汽油消耗</td>
              <td align="center" valign="middle" colspan="2">柴油消耗</td>
              <td align="center" valign="middle" colspan="2">燃气消耗</td>
              <td align="center" valign="middle" colspan="2">燃煤消耗</td>
              <td align="center" valign="middle" colspan="2">充电桩消耗</td>
              <td align="center" valign="middle" colspan="2">可再生能源消耗</td>
              <td align="center" valign="middle" colspan="2">其他能源消耗</td>
              <td align="center" valign="middle" colspan="4">用车消耗</td>
            </tr>
            <tr height="55px;">
              <td style="width:40px;">月份</td>
              <td>量(千瓦时)</td>
              <td>费用(元)</td>
              <td>量(吨)</td>
              <td>费用(元)</td>
              <td>量(升)</td>
              <td>费用(元)</td>
              <td>量(升)</td>
              <td>费用(元)</td>
              <td>量(立方米)</td>
              <td>费用(元)</td>
              <td>量(吨)</td>
              <td>费用(元)</td>
              <td>量(个)</td>
              <td>费用(元)</td>
              <td>量</td>
              <td>费用(元)</td>
              <td>量</td>
              <td>费用(元)</td>
              <td>白公里数(千米)</td>
              <td>耗油(升)</td>
              <td>百公里油耗(升)</td>
              <td>金额(元)</td>
            </tr>
            <tr :key="i" v-for="(item,i) in resultArray">
              <td align="center" valign="middle">{{item.Month}}</td>
              <td align="center" valign="middle">{{item.ElectricityTotal||0}}</td>
              <td align="center" valign="middle">{{item.ElectricityAmount||0}}</td>
              <td align="center" valign="middle">{{item.WaterTotal||0}}</td>
              <td align="center" valign="middle">{{item.WaterAmount||0}}</td>
              <td align="center" valign="middle">{{item.GasolineTotal||0}}</td>
              <td align="center" valign="middle">{{item.GasolineAmount||0}}</td>
              <td align="center" valign="middle">{{item.DieselTotal||0}}</td>
              <td align="center" valign="middle">{{item.DieselAmount||0}}</td>
              <td align="center" valign="middle">{{item.GasTotal||0}}</td>
              <td align="center" valign="middle">{{item.GasAmount||0}}</td>
              <td align="center" valign="middle">{{item.CoalTotal||0}}</td>
              <td align="center" valign="middle">{{item.CoalAmount||0}}</td>
              <td align="center" valign="middle">{{item.ChargingPileTotal||0}}</td>
              <td align="center" valign="middle">{{item.ChargingPileAmount||0}}</td>
              <td align="center" valign="middle">{{item.RenewableTotal||0}}</td>
              <td align="center" valign="middle">{{item.RenewableAmount||0}}</td>
              <td align="center" valign="middle">{{item.OtherTotal||0}}</td>
              <td align="center" valign="middle">{{item.OtherAmount||0}}</td>
              <td align="center" valign="middle">{{item.CarKilometres||0}}</td>
              <td align="center" valign="middle">{{item.CarFuelConsumption||0}}</td>
              <td align="center" valign="middle">{{getFixed(item.CarFuelConsumption,item.CarKilometres)||0}}</td>
              <td align="center" valign="middle">{{item.CarAmount||0}}</td>
            </tr>
            <tr>
              <td align="center" valign="middle">合计</td>
              <td align="center" valign="middle">{{getTotal('ElectricityTotal')}}</td>
              <td align="center" valign="middle">{{getTotal('ElectricityAmount')}}</td>
              <td align="center" valign="middle">{{getTotal('WaterTotal')}}</td>
              <td align="center" valign="middle">{{getTotal('WaterAmount')}}</td>
              <td align="center" valign="middle">{{getTotal('GasolineTotal')}}</td>
              <td align="center" valign="middle">{{getTotal('GasolineAmount')}}</td>
              <td align="center" valign="middle">{{getTotal('DieselTotal')}}</td>
              <td align="center" valign="middle">{{getTotal('DieselAmount')}}</td>
              <td align="center" valign="middle">{{getTotal('GasTotal')}}</td>
              <td align="center" valign="middle">{{getTotal('GasAmount')}}</td>
              <td align="center" valign="middle">{{getTotal('CoalTotal')}}</td>
              <td align="center" valign="middle">{{getTotal('CoalAmount')}}</td>
              <td align="center" valign="middle">{{getTotal('ChargingPileTotal')}}</td>
              <td align="center" valign="middle">{{getTotal('ChargingPileAmount')}}</td>
              <td align="center" valign="middle">{{getTotal('RenewableTotal')}}</td>
              <td align="center" valign="middle">{{getTotal('RenewableAmount')}}</td>
              <td align="center" valign="middle">{{getTotal('OtherTotal')}}</td>
              <td align="center" valign="middle">{{getTotal('OtherAmount')}}</td>
              <td align="center" valign="middle">{{getTotal('CarKilometres')}}</td>
              <td align="center" valign="middle">{{getTotal('CarFuelConsumption')}}</td>
              <td align="center" valign="middle">{{getAvage()}}</td>
              <td align="center" valign="middle">{{getTotal('CarAmount')}}</td>
            </tr>
            </tbody>
          </table>
        </div>

      </div>
      <div class="table-button">
        <a class="downLoad" :href="exportUrl">导出</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectYear: [],
      year: new Date().getFullYear(),
      departments: [],
      checked: false,
      departName: '',
      isGetting: true,
      exportUrl: '',
      resultArray: []
    }
  },
  methods: {
    async getDepartments() {
      const result = await this.$get("/api/user/departments");
      this.departments = result
      this.departName = result[0]
      this.exportUrl = `${this.baseUrl}/api/InstituionEnergy/statistics?year=${this.year}&departmentName=${this.departName}&includeChild=true&export=true`
      this.getDetail()
    },
    async getDetail() {
      this.exportUrl = `${this.baseUrl}/api/InstituionEnergy/statistics?year=${this.year}&departmentName=${this.departName}&includeChild=true&export=true`
      this.isGetting = false;
      this.resultArray = []
      const result = await this.$get("/api/InstituionEnergy/statistics", {
        year: this.year,
        departmentName: this.departName,
        includeChild: this.checked
      })
      if (result.length > 0) {
        console.log(result)
        this.resultArray = result
        this.isGetting = true
      }
    },
    getTotal(str) {
      var result = 0;
      if (this.isGetting) {
        if (this.resultArray.length > 1) {
          this.resultArray.map((i) => {
            result += i[str]
          })
          return result.toFixed(2)
        }
      }
    },
    getFixed(oil, km) {
      if (km) {
        return ((oil / km) * 100).toFixed(2)
      } else {
        return 0;
      }
    },
    getAvage() {
      var resultOil = 0;
      var resultKm = 0;
      if (this.isGetting) {
        if (this.resultArray.length > 1) {
          this.resultArray.map((i) => {
            resultOil += i.CarFuelConsumption
            resultKm += i.CarKilometres;
          })
          if (resultKm == 0) return 0
          return ((resultOil / resultKm) * 100).toFixed(2)
        }
      }
    }
  },
  created() {
    var num = new Date().getFullYear();
    for (var i = num - 13; i < num + 1; i++) {
      this.selectYear.unshift(i);
    }
    this.getDepartments();
  }
}
</script>

<style lang="scss" scoped>
.energy-table {
  padding: 25px 0;
  height: 100%;
  width: 100%;
}

.table-title {
  height: auto;
  margin-bottom: 25px;
  h2 {
    text-align: center;
    margin-bottom: 5px;
    font-size: 16px;
  }
  span {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-weight: bold;
  }
}

.explain {
  margin-top: 10px;
  p {
    color: red;
    font-size: 12px;
    line-height: 1.2;
  }
}

.table-content {
  height: auto;
  .table-select {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 25px;
    .table-selectItem {
      input {
        border: none;
        outline: none;
        border-bottom: 1px solid rgb(169, 169, 169);
        width: 320px;
      }
    }
  }
  table {
    td {
      padding: 8px 5px;
      text-align: center;
      a {
        margin-left: 10px;
        &:hover {
          color: #0000FF;
          cursor: pointer;
          text-decoration: underline;
        }
      }
      a.selectedA {
        font-weight: bold;
        text-decoration: underline;
        font-size: 15px;
      }
      span {
        &:hover {
          color: #0000FF;
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
  }
}

.table-button {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  a.downLoad {
    display: inline-block;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 18px;
    color: #1E88C7;
    text-indent: 0;
    font-size: 15px;
    line-height: 20px;
    margin-left: 20px;
  }
}

.table-box {
  width: 100%;
  overflow: auto;
}
</style>
